<template>
  <div class="app-main-container">
    <div class="doumee-filter">
      <el-button v-if="meta.indexOf('VenueOptionsAdd') > -1" v-preventReClick type="primary" @click="venueOptionsAdd">{{ $t('message.add') }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.xm')"
        prop="projectName"
        show-overflow-tooltip
        min-width="140"
      />
      <el-table-column
        align="center"
        :label="$t('message.qccd')"
        prop="name"
        min-width="200"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.bccd')"
        prop="nameOne"
        show-overflow-tooltip
        min-width="140"
      />
      <el-table-column
        align="center"
        :label="$t('message.bccd')"
        prop="nameTwo"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.createTime')"
        prop="createTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('message.caozuo')"
        min-width="100"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('unbindSiteAndSite') > -1"
              v-preventReClick
              type="text"
              class="secondColor"
              @click="toDelRelevance(scope.row.id)"
            >{{ $t('message.del') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <el-dialog :title="$t('message.cdglpz')" :visible.sync="showAddConfig" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-form ref="form" :rules="rules" :model="param" label-width="auto" label-suffix="：">
        <el-form-item :label="$t('message.xzcq')" prop="cq">
          <el-select
            v-model="param.cq"
            value-key="id"
            style="width: 100%"
            :placeholder="$t('message.xzcq')"
            @change="changeCq"
          >
            <el-option
              v-for="item in areaListData"
              :key="item.id"
              :label="item.areaName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.xzcd')" prop="cd">
          <el-select
            v-model="param.cd"
            value-key="id"
            style="width: 100%"
            :placeholder="$t('message.xzcd')"
            :disabled="param.cq ? false : true"
            @change="changeCd"
          >
            <el-option
              v-for="item in spaceListData"
              :key="item.id"
              :label="item.siteName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.kglcd')" prop="glcd">
          <el-checkbox-group v-model="param.glcd" :max="2" style="width: 100%">
            <el-checkbox
              v-for="item in glListData"
              :key="item.id"
              :label="item.id"
            >{{ item.siteName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddConfig = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
import { unbindSiteAndSite, bindSiteList, getAreaList, spaceList, getAreaCanBindSiteList, bindSiteAndSite } from '@/api'
import { parseTime } from '@/utils'
export default {
  name: 'VenueOptions',
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      list: [],
      meta: [],
      listLoading: true,
      pagination: {
        page: 1,
        rows: 10,
        firstQueryTime: ''
      },
      openStatus: [
        { value: '0', label: this.$t('message.jy') },
        { value: '1', label: this.$t('message.qy') }
      ],
      total: 0,
      filters: {},
      venueId: sessionStorage.getItem('venueId'),
      showAddConfig: false,
      param: {
        glcd: []
      },
      areaListData: [],
      spaceListData: [],
      glListData: [],
      rules: {
        cq: [{ required: true, message: this.$t('message.qxz') + this.$t('message.cq'), trigger: 'change' }],
        cd: [{ required: true, message: this.$t('message.qxz') + this.$t('message.cd'), trigger: 'change' }],
        glcd: [{ required: true, message: this.$t('message.qxz') + this.$t('message.glcd'), trigger: 'change' }]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    this.toGetAreaList()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    // 获取列表
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      bindSiteList({
        pagination,
        param: {
          ...filters,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.total = res.totalCount
            if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
              this.getList(Math.ceil(res.totalCount / pagination.rows))
            }
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    toDelRelevance(id) {
      this.$confirm(this.$t('message.sctc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      }).then(() => {
        unbindSiteAndSite({ param: { id }}).then(res => {
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.delcg'))
            this.getList()
          }
        })
      })
    },
    // 清空
    clear() {
      this.filters = {}
      this.getList(1)
    },
    venueOptionsAdd() {
      // this.$router.push({
      //   name: 'VenueOptionAdd'
      // })
      this.param = {
        glcd: []
      }
      this.showAddConfig = true
    },
    toGetAreaList() {
      const { venueId } = this
      getAreaList({ param: { venueId }}).then(res => {
        if (res.errorCode === '000000') {
          for (let i = 0; i < res.recordList.length; i++) {
            if (res.recordList[i].projectNames) {
              res.recordList[i].projectNamesArr = res.recordList[i].projectNames.split('/')
            } else {
              res.recordList[i].projectNamesArr = []
            }
          }
          this.areaListData = res.recordList
        }
      })
    },
    changeCq() {
      this.$set(this.param, 'cd', '')
      this.$set(this.param, 'glcd', [])
      this.glListData = []
      this.getSpaceList()
    },
    changeCd() {
      if (this.param.cd) {
        this.$set(this.param, 'glcd', [])
        this.areaCanBindSiteList()
      }
    },
    // 获取某场区场地列表
    getSpaceList() {
      const { param } = this
      spaceList({ param: { id: param.cq }}).then(res => {
        if (res.errorCode === '000000') {
          this.spaceListData = res.recordList
        }
      })
    },
    // 获取关联场地
    areaCanBindSiteList() {
      const { param } = this
      getAreaCanBindSiteList({ param: { id: param.cd }}).then(res => {
        if (res.errorCode === '000000') {
          this.glListData = res.recordList || []
        }
      })
    },
    onSubmit() {
      const that = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const param = {
            glcd: []
          }
          param.siteId = that.param.cd
          param.siteAId = that.param.glcd[0] || ''
          param.siteBId = that.param.glcd[1] || ''
          this.subLoading = true
          bindSiteAndSite({
            param
          }).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.pzcg'))
              this.showAddConfig = false
              this.getList()
            }
          }).catch(() => {
            this.subLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tableClass .cell {
  padding: 0 !important;
  height: 40px;
  line-height: 30px !important;
  text-align: center;
}

</style>

